<template>
  <div id="myOrderForRenter">
    <!-- tab切换 -->
    <div class="order-tab">
      <div class="tab-item" :class="{tabActive:index == tabNum}" v-for="(item, index) in tabList" :key="index" @click="tabCheck(index)">{{item}}</div>
    </div>
    <!-- 没数据的时候显示 -->
    <nodata v-show="noData"></nodata>
    <!-- 订单列表展示 -->
    <div class="order-list-item" v-for="(item, index) in orderList" :key="index">
      <house-list v-if="item.housePerson" :houseInfo="item.housePerson" :detailPath="item.houseType === 2 ? '/apartmentDetail' : '/detail'" :key="index"></house-list>
      <!-- 按钮区域，根据状态显示 -->
      <div class="btn-container" v-if="tabNum !== 2">
        <div class="order-list-btn" @click.stop="contactLandlord(item.landlordPhone)">联系房东</div>
        <div class="pay-btn" v-if="item.status === '1'"  @click.stop="pay(item.id)">
          <div>去支付</div>
          <div>
            (还剩<clocker :time="item.expireTime" format="%H小时%M分%S秒"></clocker>)
          </div>
        </div>
        <div class="marginLeft10" v-if="item.status === '4'">房东确认后可支付</div>
        <div class="order-list-btn" v-if="item.status === '2'" @click.stop="lookContractDetail(item.contractId)">合同详情</div>
      </div>
    </div>
    <payment v-model="paymentShow" :payInfo="payInfo"></payment>
    <!-- 合同详情 -->
    <div v-show="showDialog" class="v_show_contract" :class="{'tips-dialog': true}">
      <section class="tips-dialog render__contract__dialog">
        <div class="body" id="contract">
          <div class="topBack"><span  @click="BackLeft" > &lt; </span>合同详情</div>
          <!-- <contract :contractDetail="orderInfo"/> -->
          <div v-html="contractDetail.replace('\r\n', '')"></div>
        </div>
        <div class="btn-close" @click="showDialog = false"></div>
      </section>
    </div>
  </div>
</template>

<script>
import houseList from '@/components/houseList'
import Payment from '@/components/Payment'
import { Clocker } from 'vux'
export default {
  components: {
    houseList,
    Payment,
    Clocker
  },
  data () {
    return {
      tabList: ['待支付', '已支付', '已过期'],
      tabNum: 0,
      orderList: [],
      noData: false,
      showDialog: false,
      paymentShow: false,
      contractDetail: '',
      payInfo: ''
    }
  },
  created () {
    this.init()
  },
  methods: {
    // tab切换
    tabCheck (index) {
      this.tabNum = index
      this.orderList = []
      this.noData = true
      this.init()
    },
    // 支付接口
    pay (serviceId) {
      this.paymentShow = true
      this.payInfo = {type: 'order', serviceId: serviceId}
    },
    // 根据状态拉取数据
    init () {
      let _this = this
      let data = {
        page: 1,
        pageSize: 100,
        status: this.tabNum + 1
      }
      this.$axiosPosting(this.$api.renterOrders, data).then(res => {
        if (res.code === '0000') {
          if (res.data && res.data.length > 0) {
            // 处理房源数据
            let orderList = res.data
            for (let x in orderList) {
              let houseData = orderList[x]
              let housePerson = {
                id: houseData.houseId,
                coverImg: houseData.coverImg,
                address: houseData.address,
                houseTitle: houseData.houseTitle,
                createTime: houseData.createTime,
                highlights: houseData.highlights,
                rentalPrice: houseData.rentalPrice
              }
              houseData.housePerson = housePerson
            }
            _this.orderList = orderList
            this.noData = false
//            this.$nextTick(() => {
//              document.body.scrollTop = 0
//            })
          } else {
            this.noData = true
          }
        }
      })
    },
    // 联系房东
    contactLandlord (landlordPhone) {
      // let virtualNum = ''
      let mobileTo = landlordPhone
      let userInfo = JSON.parse(window.localStorage.getItem('userInfo'))
      let mobileFor = userInfo ? userInfo.mobile : ''
      if (mobileFor) {
        window.location.href = `tel:${mobileTo}`
        // if (virtualNum === '') {
        //   this.$axiosPosting(this.$api.getVirtualNum, {mobileFor, mobileTo}).then(res => {
        //     let data = ''
        //     if (res.code === '0000') {
        //       data = JSON.parse(res.data)
        //     }
        //     if (res.code === '0000' && data.errorCode === '0') {
        //       virtualNum = data.virtualNum
        //       window.location.href = `tel:${virtualNum}`
        //     } else {
        //       this.$vux.toast.text('无法获取房东电话')
        //       virtualNum = ''
        //     }
        //   })
        // } else {
        //   window.location.href = `tel:${virtualNum}`
        // }
      } else {
        this.$router.replace('/login')
      }
    },
    // 查看合同详情
    lookContractDetail (id) {
      this.$axiosPosting(this.$api.queryNewContractHT, {id: id}).then(res => {
        if (res.code === '0000') {
          this.showDialog = true
          this.contractDetail = res.data.detail
        } else {
          this.$vux.toast.text(res.msg)
        }
      })
    },
    // 合同返回
    BackLeft () {
      document.body.scrollTop = 0
      document.documentElement.scrollTop = 0
      this.showDialog = false
    }
  }
}
</script>

<style lang="less">
  #myOrderForRenter {
    .order-tab {
      height:30px;
      margin: 14px 12px;
      border: 1px solid #d0d0d0;
      display: flex;
      border-radius: 3px;
      font-size: 17px;
      line-height: 30px;
      overflow: hidden;
      .tab-item{
        flex:1;
        border-right:1px solid #ccc;
        color: #878787;
        text-align: center;
        &:nth-last-child(1){
          border-right: none;
        }
      }
      .tabActive {
        color: white;
        background: orange;
      }
    }
    .order-list-item {
      font-size: .7rem;
      border-bottom: 6px solid #F3F3F3;
      &:nth-last-child(1){
        border-bottom: none;
      }
      .btn-container{
        font-size: 12px;
        color: #ff9600;
        padding: 0 16px 12px 16px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .order-list-btn{
          height: 30px;
          line-height: 30px;
          margin-left: 10px;
          padding: 0 12px;
          border: 1px solid #ff9600;
          border-radius: 4px;
        }
        .pay-btn{
          background: #ff9600;
          height: 30px;
          width: 125px;
          text-align: center;
          border: 1px solid #ff9600;
          border-radius: 4px;
          margin-left: 10px;
          line-height: 15px;
          color: white;
        }
        .marginLeft10{
          width:125px;
          text-align: center;
          margin-left: 10px;
        }
      }
    }
    .v_show_contract{
      position: absolute;
      left: 0;
      top: 0;
      z-index: 9999;
      width: 100vw;
      min-height: 100vh;
      height: auto !important;
      overflow-y: auto !important;
      background: white;
      .tips-dialog .body {
        padding: 0 15px 15px;
      }
      .topBack {
        height: 45px;
        width: 110%;
        background: #007eff;
        text-align: center;
        line-height: 45px;
        position: fixed;
        left: -15px;
        z-index: 2;
        color: #fff;
        font-size: 18px;
        font-weight: 600;
        top: 0px;
        span{
          position: absolute;
          top: 0px;
          left: 20px;
          font-size: 25px;
          display: block;
          padding: 0 10px;
        }
      }
    }
  }
</style>
